<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 初始化echarts实例
  let myChart = echarts.init(document.getElementById('main'))
  // 窗口缩放时重置echarts实例
  window.onresize = () => {
    myChart.resize()
  }
  // 绘制图表
  myChart.setOption({
    title: {
      text: '在线听课人数',
      left: 'left',
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
  })
})
</script>

<template>
  <div class="box">
    <div
      id="main"
      style="width: 100%; height: 400px"
    ></div>
  </div>
</template>

<style scoped>
.box {
  margin-right: 15px;
  box-sizing: border-box;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
</style>
